import { Alert } from '@pxxtech/web';
import { Space } from 'antd';
import { DemoBlock } from 'demos';

export default () => {
  return (
    <Space align="start" wrap>
      <DemoBlock title="一级警告提示">
        <Space direction="vertical" style={{ width: 320 }}>
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            closable
          />
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
          />
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            showIcon={false}
          />
        </Space>
      </DemoBlock>
      <DemoBlock title="二级警告提示">
        <Space direction="vertical" style={{ width: 320 }}>
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            type="processing"
            closable
          />
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            type="processing"
          />
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            type="processing"
            showIcon={false}
          />
        </Space>
      </DemoBlock>
      <DemoBlock title="三级警告提示">
        <Space direction="vertical" style={{ width: 320 }}>
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            type="waiting"
            closable
          />
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            type="waiting"
          />
          <Alert
            message="邀请【未关联】用户加入企业，可在后续下单中快速选择。"
            description={<a>邀请用户关联企业</a>}
            type="waiting"
            showIcon={false}
          />
        </Space>
      </DemoBlock>
      <DemoBlock title="状态">
        <Space direction="vertical" style={{ width: 480 }}>
          <Alert
            message="付款申请已通过，您可前往对应的应付列表，发起付款或查看状态"
            description={<a>点击前往</a>}
            type="success"
          />
          <Alert
            message="审批已驳回，如需再次发起，将跳转至应付账单列表并筛选出数据后重新发起付款操作"
            description={<a>再次提交</a>}
            type="error"
          />
          <Alert
            message="审批已驳回，如需再次发起，将跳转至应付账单列表并筛选出数据后重新发起付款操作"
            description={<a>再次提交</a>}
            type="warning"
          />
        </Space>
      </DemoBlock>
    </Space>
  );
};
